<template>
  <div class="monitoring">

    <div style="width: 500px;height: 700px;margin-left: 300px;background-color: #000000;" id="map"></div>
  </div>
</template>
<script>
  import * as echarts from 'echarts'

  export default {
    data() {
      return {
        navList: [
          {
            name: '功能区划',
            type: 1,
            sts: true
          },
          {
            name: '网格',
            type: 2,
            sts: false
          }
        ],
      }
    },
    created() {
      this.areaId = window.sessionStorage.getItem('areaId');
      // this.getOpenApiInfo();
    },
    mounted() {
      this.datamap(this.navList[0]);
    },
    methods: {
      datamap(flag) {
        this.navList.forEach(e => {
          e.sts = false
        })
        flag.sts = true;
        if (flag.type == 1) {
          this.map('/papi/0000085_json/gnqh.json')
        } else if (flag.type == 2) {
          this.map('/papi/0000085_json/wangge.json')
        }
      },
      map(url) {
        let vm = this
        let myChart = echarts.getInstanceByDom(document.getElementById("map"))
        if (myChart == null) { // 如果不存在，就进行初始化
          myChart = echarts.init(document.getElementById("map"));
        } else {
          myChart.clear();
        }
        var uploadedDataURL = url;
        // var uploadedDataURL = '/static/json/songshan.json';
        $.getJSON(uploadedDataURL, function (geoJson) {
          echarts.registerMap('songshan', geoJson);
          let jsondata = []
          let e = ['实验区', '缓冲区', '核心区']
          e.forEach(c => {
            jsondata.push(
              {
                name: c,
                value: 1,
                label: {
                  show: false,
                },
                itemStyle: {
                  show: true,
                  areaColor: vm.filteryType(c),
                  borderColor: vm.filteryType(c),
                  borderWidth: "1"
                },
              }
            )
          })
          myChart.showLoading('default', {
            text: '加载中，请稍候...', maskColor: 'rgba(0,0,0,.3)', textColor: '#fff',
          });
          setTimeout(function () {
            myChart.hideLoading();
          }, 500);
          let tempData1 = [
            {
              name: '执法大队',
              value: [115.85203854938533, 40.40765714753269],
              indexCode: '2404687c5cd841d5b2231e8fab7ad163'
            }
          ];
          let tempData2 = [
            {
              name: '执法大队',
              value: [116.08076300345357, 40.407665159516604],
              indexCode: '39646316074f4b3cb4dc34031461d79f'
            },
          ];
          let option = {
            geo: {
              type: "map",
              map: 'songshan',
              regions: jsondata,
              show: true,
              roam: true,
            },
            series: [
              // {
              //   type: "map",
              //   data: jsondata,
              //   map: 'songshan',
              //   roam: false,
              //   show: false,
              //   itemStyle: {
              //     areaColor: '#185CA8',
              //     borderColor: '#57E1FE',
              //     borderWidth: 1,
              //   },
              //   label: {
              //     show: false, //显示省份标签
              //     color: "rgb(249, 249, 249)", //省份标签字体颜色
              //     fontSize: 12,
              //   },
              // },
              {
                type: 'scatter',
                coordinateSystem: 'geo',
                symbol: 'image:///static/images/shexiangtou.png',
                legendHoverLink: true,
                symbolSize: [28, 33],
                // legendHoverLink: true,
                itemStyle: {
                  normal: {
                    color: '#D8BC37', //标志颜色
                    shadowBlur: 2,
                    shadowColor: 'D8BC37',
                  },
                },
                data: tempData1,
                showEffectOn: 'render',
                rippleEffect: {
                  brushType: 'stroke',
                },
                hoverAnimation: true,
                zlevel: 1,
              },
              {
                type: 'scatter',
                coordinateSystem: 'geo',
                symbol: 'image:///static/images/shexiangtou.png',
                legendHoverLink: true,
                symbolSize: [28, 33],
                itemStyle: {
                  normal: {
                    color: '#D8BC37', //标志颜色
                    shadowBlur: 2,
                    shadowColor: 'D8BC37',
                  },
                },
                data: tempData2,
                showEffectOn: 'render',
                rippleEffect: {
                  brushType: 'stroke',
                },
                hoverAnimation: true,
                zlevel: 1,
              },
            ]
          }
          myChart.setOption(option, true);
        });

      },
      filteryType(e) {
        if (e == '实验区') {
          return 'rgba(203, 255, 252, 0.8)'
        }
        if (e == '缓冲区') {
          return 'rgba(74, 239, 230, 0.8)'
        }
        if (e == '核心区') {
          return 'rgba(4, 178, 169, 0.8)'
        }
        return 'rgba(203, 255, 252, 0.8)'
      },
    }
  }
</script>
<style scoped>
  @import "../../static/css/monitoring.css";
</style>
